<script setup>
    import { provide, onUnmounted, computed } from 'vue'
    import { useStore } from 'vuex'
    import ContentCard from './ContentCard.vue'

    const store = useStore()

    let url = $ref('')

    provide('close', () => {
        store.state.showIframe = false
    })

    const iframeUrl = computed(() => {
        return store.state.iframeUrl
    })

    const showIframe = computed(() => {
        return store.state.showIframe
    })
    

    // 跳转新页面
    const jumpLink = () => {
        window.open(store.state.iframeUrl)
    }

    onUnmounted(() => {
        store.state.showIframe = false
    })


</script>

<template>
    <content-card :showBack="false" v-if="showIframe">
        <template #tabbar>
            <img class="enlarge" src="../assets/images/enlarge.png" @click="jumpLink">
        </template>

        <iframe width="100%" height="100%" :src="iframeUrl" frameborder="0"></iframe>
        
    </content-card>
</template>

<style lang="less" scoped>
    .enlarge{
        cursor: pointer;
        margin-right: 20px;
    }
</style>